<template>
	<div id="RoleManage">
		<table>
			<thead>
				<tr>
					<td colspan="4" style="text-align:left">
						<el-button 
							type="primary" 
							@click="showAddNewRole=true"
						>
							新增角色
						</el-button>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>角色名称</td>
					<td>角色描述</td>
					<td>详情</td>
					<td>操作</td>
				</tr>
				<tr v-for="(item,key) in allRoles" :key="key">
					<td>{{item.roleName}}</td>
					<td>{{item.roleDesc}}</td>
					<td></td>
					<td>
						<el-button 
							type="primary"
							size="mini"
							@click="dialogVisible=true,role=item"
						>
							编辑角色
						</el-button>
						<el-button 
							type="danger"
							size="mini"
							@click="deleteRole(item)"
						>
							删除角色
						</el-button>
					</td>
				</tr>
			</tbody>
		</table>
		<transition name="fadeUp">
			<editor-manage 
				:dialogVisible="dialogVisible"
				:role=role
			>	
			</editor-manage>
		</transition>
		<transition name="fadeUp">
			<add-new-role
				v-if="showAddNewRole"
			>	
			</add-new-role>
		</transition>
	</div>
</template>

<script>
import EditorManage from './EditorManage'
import AddNewRole from './AddNewRole'
export default{
	components:{EditorManage,AddNewRole},
	data(){
		return{
			dialogVisible:false,
			showAddNewRole:false,
			role:{}
		}
	},
	computed:{
		allRoles(){
			return this.$store.getters.allRoles;
		}
	},
	methods:{
		addNewRole(){
			
		},
		deleteRole(item){
			if(item.roleName=="admin"){
				this.$alert('不能删除该角色','警告',{
					confirmButtonText:'确定',
				});
			}else{
				this.$http.post(this.$apis.deleteRole,{_id:item._id})
				.then((resp)=>{
					this.$message({
						message:resp.message,
						type:resp.success?"success":"danger"
					});
					this.$store.dispatch("allRoles",{api:this.$api.allRoles});
				})
			}
		}
	},
	created(){
		this.$store.dispatch("allRoles");
	}
}
</script>

<style lang="scss" scoped>
	
</style>